<!doctype html>
<html ng-app="chinaums.study">
<head>
    <title>人像识别</title>
    <link rel="stylesheet" href="webjars/bootstrap/3.3.7-1/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="webjars/bootstrap-material-design/0.5.9/css/bootstrap-material-design.min.css"/>
    <script type="application/javascript" src="webjars/angularjs/1.6.0/angular.min.js"></script>
    <script type="text/javascript" src="upload-pic.js"></script>
    <style>
        .repo-btn > span {
            width: 1rem;
            display: inline-block;
            margin-left: -1rem;
        }
        .form-control {
            height: auto;
        }
        .form-group input[type=file] {
            opacity: 0.8;
            position: inherit;
        }
    </style>
</head>
<body>
<div class="container" ng-controller="picUploadCtrl">
    <div class="jumbotron">
        <div class="jumbotron-body">
            <h1>上传照片</h1>
            <p>请上传要识别的照片，获取图片库中的相似照片</p>
        </div>
    </div>

    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">上传照片</h3>
        </div>
        <div class="panel-body">
            <form method="post" enctype="multipart/form-data" ng-init="formData = {repos:[]}" ng-submit="submit(formData)">
                <div class="form-group">
                    <label for="pic">照片</label>
                    <input type="file" class="form-control" id="pic" name="file" file-model="formData.pic">
                </div>

                <div class="form-group">
                    <label for="pic">候选图片库</label>
                    <div class="form-control btn-group" role="group">
                        <button type="button" class="btn repo-btn"
                                ng-class="formData.repos.includes(repo.id) ? 'btn-primary' : 'btn-default'"
                                ng-repeat="repo in allRepos" ng-click="checkRepo(formData.repos, repo.id)">
                            <span ng-show="formData.repos.includes(repo.id)">√</span>
                            <span ng-hide="formData.repos.includes(repo.id)"></span>
                            {{repo.name}}
                        </button>
                    </div>
                </div>

                <button type="submit" class="btn btn-primary">检索</button>
            </form>
        </div>
    </div>

    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">应答信息</h3>
        </div>
        <div class="panel-body">
            <ul id="response-message">
                <li ng-repeat="item in result">
                    <div>{{item.name}}</div>
                    <img ng-src="{{item.picture_uri}}" style="max-width: 100%"/>
                </li>
            </ul>
            <div id="error-message">
                {{errorMessage}}
            </div>
        </div>
    </div>
</div>
</body>
</html>